@import '~theme/helpers';

// TODO: separate styles

.charts,
.dashboard {
  .chart1__container,
  .chart2__container,
  .pie-chart__container,
  .discrete-bar-chart__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    min-height: $pie-chart-height;

    svg {
      min-height: 200px;
      max-width: 180px;

      .nvd3.nv-pie {
        path {
          fill-opacity: 1;
          stroke-width: 0;
        }

        .nv-pie-title {
          @include typo-piechart-title;

          font-size: 22px !important;
        }
      }
    }

    .legend {
      max-width: 140px;
    }
  }

  .nvd3 {
    text {
      font: normal 12px Arial, Helvetica, sans-serif;
      fill: $color-white !important;
    }
  }

  .chart1__container .nv-label {
    text {
      fill: $color-white !important;
    }
  }

  .discrete-bar-chart__container,
  .line-plus-bar-chart__container,
  .stacked-bar-chart__container {
    .nv-controlsWrap .nv-legend-symbol {
      fill: $color-teal !important;
      stroke: $color-teal !important;
    }

    .nv-group {
      fill-opacity: 0.9 !important;
    }

    .nv-axis {
      text {
        fill: $color-white;
        opacity: 0.5 !important;
      }

      .domain,
      .nv-zeroLine {
        stroke: $color-white;
        opacity: 0.5;
      }

      .tick {
        line {
          opacity: 0.1 !important;
        }
      }
    }

    .nv-legend-text {
      opacity: 0.5;
    }
  }

  .discrete-bar-chart__container {
    height: 100%;

    svg {
      height: 240px;
      max-width: calc(100% - 140px);

      .nv-bar {
        text {
          fill: $color-white !important;
          opacity: 0.9;
        }
      }

      .nv-axis {
        &.nv-x {
          text {
            display: none;
          }
        }

        &.nv-y {
          .tick:nth-child(2n) {
            text {
              display: none;
            }
          }
        }
      }
    }
  }

  .line-plus-bar-chart__container,
  .stacked-bar-chart__container {
    svg,
    svg .nv-linePlusBar {
      height: 250px;
    }
  }
}
